﻿<!DOCTYPE html>
<html>
  <head>
    <title>The Eight</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/font-awesome.css">
    <link rel="stylesheet" href="css/owl.carousel.css">
    <link rel="stylesheet" href="css/jquery.fancybox.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/indent.css">
    <link rel="stylesheet" href="fonts/fi/flaticon.css">
    <link rel="stylesheet" href="rs-plugin/css/settings.css">
    <link rel="stylesheet" href="rs-plugin/css/layers.css">
    <link rel="stylesheet" href="rs-plugin/css/navigation.css">
    <link rel="stylesheet" type="text/css" href="tuner/css/colorpicker.css">
    <link rel="stylesheet" type="text/css" href="tuner/css/styles.css">
  </head>
  <body>
    <!-- header page-->
    <header>
      <!-- site top panel-->
      <!-- site top panel-->
      <div class="site-top-panel">
        <div class="container">
          <div class="row">
            <div class="col-sm-6">
              <!-- lang select wrapper-->
              <div class="lang-wrap"><i class="icon-lang flaticon-earth-globe21"></i>Change your language
                <select name="billing_lang" class="lang-change">
                  <option value="">English</option>
                  <option value="AX">Åland</option>
                  <option value="AF">Afghanistan</option>
                  <option value="AL">Albania</option>
                  <option value="DZ">Algeria</option>
                  <option value="AD">Andorra</option>
                  <option value="AO">Angola</option>
                  <option value="AI">Anguilla</option>
                </select>
              </div>
              <!-- ! lang select wrapper-->
            </div>
            <div class="col-sm-6 text-right">
              <!-- social wrapper-->
              <div class="social-wrap"><a href="#" class="cws-social flaticon-facebook55"></a><a href="#" class="cws-social flaticon-twitter1"></a><a href="#" class="cws-social fa fa-google-plus"></a><a href="#" class="cws-social flaticon-social-network106"></a><a href="#" class="cws-social flaticon-pinterest3"></a></div>
              <!-- ! social wrapper-->
            </div>
          </div>
        </div>
      </div>
      <!-- ! site top panel-->
      <!-- ! site top panel-->
      <!-- Navigation panel-->
      <nav class="main-nav js-stick">
        <div class="full-wrapper relative clearfix container">
          <!-- Logo ( * your text or image into link tag *)-->
          <div class="nav-logo-wrap local-scroll"><a href="index.html" class="logo"><img src="img/the8-logo.png" data-at2x="img/the8-logo@2x.png" alt><img src="img/the8-logo-sticky.png" data-at2x="img/the8-logo-sticky@2x.png" alt class="sticky-logo"></a></div>
          <!-- Main Menu-->
          <div class="inner-nav desktop-nav">
            <ul class="clearlist">
              <!-- Item With Sub-->
              <li><a href="index.html" class="mn-has-sub active">Home <i class="fa fa-angle-down button_open"></i></a>
                <ul class="mn-sub">
                  <li class="active"><a href="index.html">Standart Slider</a></li>
                  <li><a href="index-slider.html">Full-Screen Slider</a></li>
                  <li><a href="index-video.html">Video Background</a></li>
                </ul>
              </li>
              <!-- End Item With Sub-->
              <!-- Item With Sub-->
              <li><a href="page-about-us.html" class="mn-has-sub">Pages <i class="fa fa-angle-down button_open"></i></a>
                <!-- Sub-->
                <ul class="mn-sub">
                  <li><a href="page-about-us.html">About Us</a></li>
                  <li><a href="page-services.html">Services</a></li>
                  <li><a href="page-procces.html">Our Procces</a></li>
                  <li><a href="page-our-team.html">Our Team</a></li>
                  <li><a href="page-profile.html">Profile</a></li>
                  <li><a href="page-components.html">Components</a></li>
                </ul>
                <!-- End Sub-->
              </li>
              <!-- End Item With Sub-->
              <!-- Item With Sub-->
              <li><a href="portfolio-3-col.html" class="mn-has-sub">Portfolio <i class="fa fa-angle-down button_open"></i></a>
                <!-- Sub-->
                <ul class="mn-sub">
                  <li><a href="portfolio-3-col.html">Three Columns</a></li>
                  <li><a href="portfolio-4-col.html">Four Columns</a></li>
                  <li><a href="portfolio-with-sidebar.html">With Sidebar</a></li>
                  <li><a href="portfolio-gallery.html">Gallery</a></li>
                  <li><a href="page-portfolio-single.html">Portfolio Single</a></li>
                </ul>
                <!-- End Sub-->
              </li>
              <!-- End Item With Sub-->
              <!-- Item With Sub-->
              <li><a href="blog-sidebar-right.html" class="mn-has-sub">Blog <i class="fa fa-angle-down button_open"></i></a>
                <!-- Sub-->
                <ul class="mn-sub">
                  <li><a href="blog-2-col.html" class="mn-has-sub">Columns<i class="fa fa-angle-right pull-right button_open"></i></a>
                    <ul class="mn-sub to-left">
                      <li><a href="blog-2-col.html">Two Columns</a></li>
                      <li><a href="blog-2-col-sidebar.html">Two Columns + Sidebar</a></li>
                      <li><a href="blog-3-col.html">Three Columns</a></li>
                    </ul>
                  </li>
                  <li><a href="blog-sidebar-right.html">Blog Right Sidebar</a></li>
                  <li><a href="blog-medium-img.html">Medium Images</a></li>
                  <li><a href="blog-small-img.html">Small Images</a></li>
                  <li><a href="blog-single.html">Blog Single</a></li>
                </ul>
                <!-- End Sub-->
              </li>
              <!-- End Item With Sub-->
              <!-- Item With Sub-->
              <li><a href="shop-grid.html" class="mn-has-sub">Shop <i class="fa fa-angle-down button_open"></i></a>
                <!-- Sub-->
                <ul class="mn-sub">
                  <li><a href="shop-grid.html">Shop Grid</a></li>
                  <li><a href="shop-cart.html">Shop Cart</a></li>
                  <li><a href="shop-checkout.html">Shop Checkout</a></li>
                  <li><a href="shop-single.html">Shop Single Product</a></li>
                </ul>
                <!-- End Sub-->
              </li>
              <!-- End Item With Sub-->
              <!-- Item-->
              <li><a href="page-contact.html">Contact</a></li>
              <!-- End Item-->
              <!-- Cart-->
              <li class="menu-shop-card"><a href="#" class="mn-has-sub"><i class="flaticon-shopping-carts6 button_open"><span>2</span></i></a>
                <ul class="mn-sub right">
                  <li>
                    <aside class="widget-top-sellers shop-cart-menu">
                      <p>You have 
                        <span2 class="tx-color-2">item(s)</span2> in your shopping bag
                      </p>
                      <!-- item recent post-->
                      <div class="item-top-sellers clearfix"><img src="pic/shop/70x70/6.jpg" data-at2x="pic/shop/70x70/6@2x.jpg" alt>
                        <h3 class="title"><a href="shop-single.html">Phasellus accumsan cur</a></h3>
                        <div class="price">1 x $55.00</div>
                      </div>
                      <!-- ! item recent post-->
                      <!-- item recent post-->
                      <div class="item-top-sellers clearfix"><img src="pic/shop/70x70/1.jpg" data-at2x="pic/shop/70x70/1@2x.jpg" alt>
                        <h3 class="title"><a href="shop-single.html">Aenean posuere tortor</a></h3>
                        <div class="price">3 x $120.00</div>
                      </div>
                      <!-- ! item recent post-->
                      <hr class="mt-10 mb-10">
                      <div class="sub-total clearfix">Sub Total: <span>$2400</span></div>
                      <hr class="mt-10 mb-10">
                      <div class="row">
                        <div class="col-xs-6"><a href="shop-cart.html" class="cws-button full-width">View Cart</a></div>
                        <div class="col-xs-6"><a href="shop-checkout.html" class="cws-button full-width">Checkout</a></div>
                      </div>
                    </aside>
                  </li>
                </ul>
              </li>
              <!-- End Cart-->
              <!-- Search-->
              <li class="search"><a href="#" class="mn-has-sub"><i class="flaticon-magnifying-glass34 search-icon"></i></a>
                <ul class="search-sub">
                  <li>
                    <div class="container">
                      <div class="mn-wrap">
                        <form method="post" class="form">
                          <div class="search-wrap">
                            <input type="text" placeholder="Search . . ." class="form-control search-field">
                          </div>
                        </form>
                      </div>
                      <div class="close-button flaticon-cancel30"></div>
                    </div>
                  </li>
                </ul>
              </li>
              <!-- End Search-->
            </ul>
          </div>
          <!-- End Main Menu-->
        </div>
      </nav>
      <!-- End Navigation panel-->
    </header>
    <!-- ! header page-->
    <div class="tp-banner-container">
      <div class="tp-banner-slider">
        <ul>
          <li data-masterspeed="700" data-slotamount="7" data-transition="fade"><img src="rs-plugin/assets/loader.gif" data-bgfit="cover" data-bgposition="center 70%" data-lazyload="pic/slider/main/slide-1.jpg" alt="" data-bgparallax="10">
            <div data-x="['left','center','center','center']" data-hoffset="0" data-y="center" data-voffset="-70%" data-width="['1170px','700px','500px','300px']" data-transform_in="y:-50px;opacity:0;s:1500;e:Power3.easeInOut;" data-transform_out="y:50px;opacity:0;s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;" data-start="400" class="tp-caption sl-content text-center"><img src="img/the8-logo-sticky@2x.png" data-at2x="img/the8-logo-sticky@2x.png" alt>
              <div class="sl-title text-white">MEET THE EIGHT</div>
              <p class="text-white">Creative, Multipurpose WordPress Theme</p><a href="#" class="cws-button white">Discover Now</a>
            </div>
          </li>
          <li data-masterspeed="700" data-transition="fade"><img src="rs-plugin/assets/loader.gif" data-lazyload="pic/slider/main/slide-2.jpg" data-bgposition="center 45%" alt="" data-bgparallax="10">
            <div data-x="['right','center','center','center']" data-hoffset="0" data-y="center" data-voffset="-70%" data-width="['1170px','700px','500px','300px']" data-transform_in="y:-50px;opacity:0;s:1500;e:Power3.easeInOut;" data-transform_out="y:50px;opacity:0;s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;" data-start="400" class="tp-caption sl-content text-center"><img src="img/the8-logo-sticky@2x.png" data-at2x="img/the8-logo-sticky@2x.png" alt>
              <div class="sl-title text-white">ENDLESS POSSIBILITIES</div>
              <p class="text-white">The best solution for your business.</p><a href="#" class="cws-button white">Discover Now</a>
            </div>
          </li>
          <li data-masterspeed="700" data-transition="fade"><img src="rs-plugin/assets/loader.gif" data-lazyload="pic/slider/main/slide-3.jpg" data-bgposition="center 67%" alt="" data-kenburns="on" data-duration="30000" data-ease="Linear.easeNone" data-scalestart="100" data-scaleend="120" data-rotatestart="0" data-rotateend="0" data-offsetstart="0 0" data-offsetend="0 0" data-bgparallax="10">
            <div data-x="['left','center','center','center']" data-hoffset="0" data-y="center" data-voffset="-70%" data-width="['1170px','700px','500px','300px']" data-transform_in="y:-50px;opacity:0;s:1500;e:Power3.easeInOut;" data-transform_out="y:50px;opacity:0;s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;" data-start="400" class="tp-caption sl-content text-center"><img src="img/the8-logo-sticky@2x.png" data-at2x="img/the8-logo-sticky@2x.png" alt>
              <div class="sl-title text-white">SIMPLE & POWERFUL </div>
              <p class="text-white">Create with no limits.</p><a href="#" class="cws-button white">Discover Now</a>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- section full width service-->
    <div class="container">
      <div class="row">
        <div class="col-md-10 col-md-offset-1 col-xs-10 col-xs-offset-1 p-side">
          <div class="row flex-box services-with-bg mt-minus">
            <div class="col-md-4 service-center-icon white text-center">
              <!-- bg icon--><i class="cws-icon flaticon-lights7 mb-20"></i>
              <!-- ! bg icon-->
              <!-- title-->
              <h3 class="mt-0 mb-0">Research</h3>
              <!-- ! title-->
              <div class="divider mt-10 mb-5 gray-darknest mini"></div>
              <p class="mb-30">Lorem ipsum dolor sit amet</p><a href="#" class="cws-button small">See More</a>
            </div>
            <div class="col-md-4 service-center-icon color-4 text-center">
              <!-- bg icon--><i class="cws-icon flaticon-mug16 text-white mb-20"></i>
              <!-- ! bg icon-->
              <!-- title-->
              <h3 class="mt-0 mb-0 text-white">Design</h3>
              <!-- ! title-->
              <div class="divider mt-10 mb-5 white mini"></div>
              <p class="text-white mb-30">Lorem ipsum dolor sit amet</p><a href="#" class="cws-button white color-4 small">See More</a>
            </div>
            <div class="col-md-4 service-center-icon text-center">
              <!-- bg icon--><i class="cws-icon flaticon-diamond7 text-white mb-20"></i>
              <!-- ! bg icon-->
              <!-- title-->
              <h3 class="mt-0 mb-0 text-white">Developing</h3>
              <!-- ! title-->
              <div class="divider mt-10 mb-5 white mini"></div>
              <p class="text-white mb-30">Lorem ipsum dolor sit amet</p><a href="#" class="cws-button white small">See More</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- ! section full width section-->
    <!-- page section services-->
    <section class="page-section">
      <div class="container">
        <div class="row">
          <div class="col-md-10 col-md-offset-1">
            <!-- title section-->
            <h2 class="title-section text-center mt-0 mb-0">Our <span>Features</span></h2>
            <!-- ! title section-->
            <div class="divider gray mt-20 mb-25"></div>
            <p class="text-center mb-40">Curabitur at lacus ac velit ornare lobortis. Curabitur a felis in nunc fringilla tristique. Morbi mattis ullamcorper velit. Phasellus gravida semper nisi. Nullam vel sem. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam.</p>
          </div>
        </div>
        <div class="row flex-box">
          <div class="col-md-4 mb-md-50">
            <!-- service item-->
            <div class="service-item icon-right mb-50"><i class="flaticon-pencils13 cws-icon type-3"></i>
              <h3>Clean Design</h3>
              <p>Lorem ipsum dolor sit amet, consectetuer adip iscing elit, enean commodo. <a href="#">See More !</a></p>
            </div>
            <!-- ! service item-->
            <!-- service item-->
            <div class="service-item icon-right mb-50"><i class="flaticon-cogwheels10 cws-icon type-3 color-5"></i>
              <h3>Unbelievable options</h3>
              <p>Cum penatibus et magnis disel parturient montes, nascetur. <a href="#" class="color-5">Learn More !</a></p>
            </div>
            <!-- ! service item-->
            <!-- service item-->
            <div class="service-item icon-right"><i class="flaticon-smartphones23 cws-icon type-3 color-4"></i>
              <h3>Responsive Layout</h3>
              <p>Donec pede justo, fringilla vel, aliquet nec, vul putate eget, arcu. In enim justo. <a href="#" class="color-4">Read !</a></p>
            </div>
            <!-- ! service item-->
          </div>
          <div class="col-md-4 mb-md-170 flex-item-end"><img src="pic/woman-blue.jpg" alt class="mb-minus-140"></div>
          <div class="col-md-4">
            <!-- service item-->
            <div class="service-item icon-left mb-50"><i class="flaticon-shopping-carts6 cws-icon type-3 color-3"></i>
              <h3>Shop Pages Included</h3>
              <p>Nullam dictum felis eu pede mollis pretium. In teger tincidunt. Cras dapibus. <a href="#" class="color-3">See Now !</a></p>
            </div>
            <!-- ! service item-->
            <!-- service item-->
            <div class="service-item icon-left mb-50"><i class="flaticon-mug16 cws-icon type-3 color-2"></i>
              <h3>Unlimited Colors</h3>
              <p>Aenean vulputate tellus. Aenean leosi ligula, rosuces consequat vitae. <a href="#" class="color-2">See More !</a></p>
            </div>
            <!-- ! service item-->
            <!-- service item-->
            <div class="service-item icon-left"><i class="flaticon-profile5 cws-icon type-3 color-6"></i>
              <h3>Friendly Support</h3>
              <p>Phasellus viverra nulla varius laoreet. Quisque rutrum, cies nisi vel augue. <a href="#" class="color-6">Try It !</a></p>
            </div>
            <!-- ! service item-->
          </div>
        </div>
      </div>
    </section>
    <!-- ! page section services-->
    <!-- page section about-->
    <section class="page-section bg-gray bt-gray">
      <div class="container">
        <div class="row">
          <div class="col-md-6 mb-md-50"><img src="pic/items-1.png" alt class="fix-img-2 mt-20"></div>
          <div class="col-md-6">
            <!-- section title-->
            <h2 class="title-section mt-0 mb-0">About <span>The Eight</span></h2>
            <!-- ! section title-->
            <div class="divider left mt-20 mb-25"></div>
            <p class="mb-25">Curabitur at lacus ac velit ornare lobortis. Curabitur a felis in nunc fringilla tristique. Morbi mattis ullamcorper velit. Phasellus gravida semper nisi. </p>
            <!-- toogle-->
            <div class="toggle mb-40">
              <div class="content-title active"> <i class="flaticon-arrow487 toggle-icon"></i><span class="active"><i class="flaticon-lights7"></i>Estibulum ante ipsum primis in faucibus orci luctus et ultrices</span></div>
              <div style="display: block" class="content">Cras posuere vel ipsum ac varius. Nam hendrerit odio eget diam venenatis, in eros tempus ante blandit. Aenean accumsan tellus leo.</div>
              <div class="content-title"> <i class="flaticon-arrow487 toggle-icon"></i><span><i class="flaticon-diamond7"></i>Estibulum ante ipsum primis in faucibus orci luctus et ultrices.</span></div>
              <div class="content">Cras posuere vel ipsum ac varius. Nam hendrerit odio eget diam venenatis, in eros tempus ante blandit. Aenean accumsan tellus leo.</div>
              <div class="content-title"> <i class="flaticon-arrow487 toggle-icon"></i><span><i class="flaticon-smartphones23"></i>Estibulum ante ipsum primis in faucibus orci luctus et ultrices.</span></div>
              <div class="content">Cras posuere vel ipsum ac varius. Nam hendrerit odio eget diam venenatis, in eros tempus ante blandit. Aenean accumsan tellus leo.</div>
            </div>
            <!-- ! toogle--><a href="#" class="cws-button">Learn More</a><a href="#" class="cws-button alt">Buy Theme</a>
          </div>
        </div>
      </div>
      <!-- list-->
    </section>
    <!-- ! page section about-->
    <!-- section parallax-->
    <section class="page-section cws_prlx_section pt-180 pb-180"><img src="pic/1920x1080-img-1.jpg" alt class="cws_prlx_layer">
      <div class="overlay"></div>
      <div class="container">
        <div class="row">
          <div class="col-md-10 col-md-offset-1">
            <h2 class="title-section mb0 mt-0 text-center text-white">Best Theme Ever! Discover <span>The Eight</span></h2>
            <div class="divider mb-20 mt-25 white"></div>
            <p class="text-center text-white mb-30">Donec convallis a velit nec ultricies. Vestibulum elementum neque vitae orci vehicula, ac varius mi fringilla. Nullam molestie lectus vitae lorem aliquet, quis rutrum quam blandit. Nunc arcu mi, blandit ac nisl ut, lacinia dignissim massa.</p>
            <div class="text-center"><a href="#" class="cws-button white">Check It</a></div>
          </div>
        </div>
      </div>
    </section>
    <!-- ! section parallax-->
    <!-- section filter-->
    <section class="page-section pb-0">
      <div class="container">
        <div class="row">
          <div class="col-md-10 col-md-offset-1">
            <!-- title section-->
            <h2 class="title-section text-center mt-0 mb-0">Portfolio</h2>
            <!-- ! title section-->
            <div class="divider gray mt-20 mb-25"></div>
            <p class="text-center mb-30">Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum blandit vel, luctus pulvinar.</p>
          </div>
        </div>
      </div>
      <!-- filter-->
      <div class="isotop-container">
        <div class="container">
          <div class="filter-buttons mb-40">
            <!-- filter controls--><a href="#" data-filter=".video" class="filter-button active">Video</a><a href="#" data-filter=".photo" class="filter-button">Photos</a>
            <!-- ! filter controls-->
          </div>
        </div>
        <div class="isotope-grid full-width-isotope">
          <!-- isotop item-->
          <div class="pic isotope-item video"><img src="pic/portfolio/img-1.jpg" data-at2x="pic/portfolio/img-1@2x.jpg" alt>
            <div class="hover-effect alt"></div>
            <div class="links"><a href="pic/portfolio/img-1@2x.jpg" class="link-icon alt flaticon-magnifying-glass84 fancy"></a><a href="page-portfolio-single.html" class="link-icon alt flaticon-return13"></a></div>
          </div>
          <!-- ! isotop item-->
          <!-- isotop item-->
          <div class="pic isotope-item video"><img src="pic/portfolio/img-2.jpg" data-at2x="pic/portfolio/img-2@2x.jpg" alt>
            <div class="hover-effect alt"></div>
            <div class="links"><a href="pic/portfolio/img-2@2x.jpg" class="link-icon alt flaticon-magnifying-glass84 fancy"></a><a href="page-portfolio-single.html" class="link-icon alt flaticon-return13"></a></div>
          </div>
          <!-- ! isotop item-->
          <!-- isotop item-->
          <div class="pic isotope-item video"><img src="pic/portfolio/img-3.jpg" data-at2x="pic/portfolio/img-3@2x.jpg" alt>
            <div class="hover-effect alt"></div>
            <div class="links"><a href="pic/portfolio/img-3@2x.jpg" class="link-icon alt flaticon-magnifying-glass84 fancy"></a><a href="page-portfolio-single.html" class="link-icon alt flaticon-return13"></a></div>
          </div>
          <!-- ! isotop item-->
          <!-- isotop item-->
          <div class="pic isotope-item video"><img src="pic/portfolio/img-4.jpg" data-at2x="pic/portfolio/img-4@2x.jpg" alt>
            <div class="hover-effect alt"></div>
            <div class="links"><a href="pic/portfolio/img-4@2x.jpg" class="link-icon alt flaticon-magnifying-glass84 fancy"></a><a href="page-portfolio-single.html" class="link-icon alt flaticon-return13"></a></div>
          </div>
          <!-- ! isotop item-->
          <!-- isotop item-->
          <div class="pic isotope-item video"><img src="pic/portfolio/img-5.jpg" data-at2x="pic/portfolio/img-5@2x.jpg" alt>
            <div class="hover-effect alt"></div>
            <div class="links"><a href="pic/portfolio/img-5@2x.jpg" class="link-icon alt flaticon-magnifying-glass84 fancy"></a><a href="page-portfolio-single.html" class="link-icon alt flaticon-return13"></a></div>
          </div>
          <!-- ! isotop item-->
          <!-- isotop item-->
          <div class="pic isotope-item video"><img src="pic/portfolio/img-6.jpg" data-at2x="pic/portfolio/img-6@2x.jpg" alt>
            <div class="hover-effect alt"></div>
            <div class="links"><a href="pic/portfolio/img-6@2x.jpg" class="link-icon alt flaticon-magnifying-glass84 fancy"></a><a href="page-portfolio-single.html" class="link-icon alt flaticon-return13"></a></div>
          </div>
          <!-- ! isotop item-->
          <!-- isotop item-->
          <div class="pic isotope-item video"><img src="pic/portfolio/img-7.jpg" data-at2x="pic/portfolio/img-7@2x.jpg" alt>
            <div class="hover-effect alt"></div>
            <div class="links"><a href="pic/portfolio/img-7@2x.jpg" class="link-icon alt flaticon-magnifying-glass84 fancy"></a><a href="page-portfolio-single.html" class="link-icon alt flaticon-return13"></a></div>
          </div>
          <!-- ! isotop item-->
          <!-- isotop item-->
          <div class="pic isotope-item video"><img src="pic/portfolio/img-8.jpg" data-at2x="pic/portfolio/img-8@2x.jpg" alt>
            <div class="hover-effect alt"></div>
            <div class="links"><a href="pic/portfolio/img-8@2x.jpg" class="link-icon alt flaticon-magnifying-glass84 fancy"></a><a href="page-portfolio-single.html" class="link-icon alt flaticon-return13"></a></div>
          </div>
          <!-- ! isotop item-->
          <!-- isotop item-->
          <div class="pic isotope-item video"><img src="pic/portfolio/img-9.jpg" data-at2x="pic/portfolio/img-9@2x.jpg" alt>
            <div class="hover-effect alt"></div>
            <div class="links"><a href="pic/portfolio/img-9@2x.jpg" class="link-icon alt flaticon-magnifying-glass84 fancy"></a><a href="page-portfolio-single.html" class="link-icon alt flaticon-return13"></a></div>
          </div>
          <!-- ! isotop item-->
          <!-- isotop item-->
          <div class="pic isotope-item video"><img src="pic/portfolio/img-10.jpg" data-at2x="pic/portfolio/img-10@2x.jpg" alt>
            <div class="hover-effect alt"></div>
            <div class="links"><a href="pic/portfolio/img-10@2x.jpg" class="link-icon alt flaticon-magnifying-glass84 fancy"></a><a href="page-portfolio-single.html" class="link-icon alt flaticon-return13"></a></div>
          </div>
          <!-- ! isotop item-->
          <!-- isotop item-->
          <div class="pic isotope-item video"><img src="pic/portfolio/img-11.jpg" data-at2x="pic/portfolio/img-11@2x.jpg" alt>
            <div class="hover-effect alt"></div>
            <div class="links"><a href="pic/portfolio/img-11@2x.jpg" class="link-icon alt flaticon-magnifying-glass84 fancy"></a><a href="page-portfolio-single.html" class="link-icon alt flaticon-return13"></a></div>
          </div>
          <!-- ! isotop item-->
          <!-- isotop item-->
          <div class="pic isotope-item video"><img src="pic/portfolio/img-12.jpg" data-at2x="pic/portfolio/img-12@2x.jpg" alt>
            <div class="hover-effect alt"></div>
            <div class="links"><a href="pic/portfolio/img-12@2x.jpg" class="link-icon alt flaticon-magnifying-glass84 fancy"></a><a href="page-portfolio-single.html" class="link-icon alt flaticon-return13"></a></div>
          </div>
          <!-- ! isotop item-->
          <!-- isotop item-->
          <div class="pic isotope-item photo"><img src="pic/portfolio/img-12.jpg" data-at2x="pic/portfolio/img-12@2x.jpg" alt>
            <div class="hover-effect alt"></div>
            <div class="links"><a href="pic/portfolio/img-12@2x.jpg" class="link-icon alt flaticon-magnifying-glass84 fancy"></a><a href="page-portfolio-single.html" class="link-icon alt flaticon-return13"></a></div>
          </div>
          <!-- ! isotop item-->
          <!-- isotop item-->
          <div class="pic isotope-item photo"><img src="pic/portfolio/img-11.jpg" data-at2x="pic/portfolio/img-11@2x.jpg" alt>
            <div class="hover-effect alt"></div>
            <div class="links"><a href="pic/portfolio/img-11@2x.jpg" class="link-icon alt flaticon-magnifying-glass84 fancy"></a><a href="page-portfolio-single.html" class="link-icon alt flaticon-return13"></a></div>
          </div>
          <!-- ! isotop item-->
          <!-- isotop item-->
          <div class="pic isotope-item photo"><img src="pic/portfolio/img-10.jpg" data-at2x="pic/portfolio/img-10@2x.jpg" alt>
            <div class="hover-effect alt"></div>
            <div class="links"><a href="pic/portfolio/img-10@2x.jpg" class="link-icon alt flaticon-magnifying-glass84 fancy"></a><a href="page-portfolio-single.html" class="link-icon alt flaticon-return13"></a></div>
          </div>
          <!-- ! isotop item-->
          <!-- isotop item-->
          <div class="pic isotope-item photo"><img src="pic/portfolio/img-9.jpg" data-at2x="pic/portfolio/img-9@2x.jpg" alt>
            <div class="hover-effect alt"></div>
            <div class="links"><a href="pic/portfolio/img-9@2x.jpg" class="link-icon alt flaticon-magnifying-glass84 fancy"></a><a href="page-portfolio-single.html" class="link-icon alt flaticon-return13"></a></div>
          </div>
          <!-- ! isotop item-->
          <!-- isotop item-->
          <div class="pic isotope-item photo"><img src="pic/portfolio/img-8.jpg" data-at2x="pic/portfolio/img-8@2x.jpg" alt>
            <div class="hover-effect alt"></div>
            <div class="links"><a href="pic/portfolio/img-8@2x.jpg" class="link-icon alt flaticon-magnifying-glass84 fancy"></a><a href="page-portfolio-single.html" class="link-icon alt flaticon-return13"></a></div>
          </div>
          <!-- ! isotop item-->
          <!-- isotop item-->
          <div class="pic isotope-item photo"><img src="pic/portfolio/img-7.jpg" data-at2x="pic/portfolio/img-7@2x.jpg" alt>
            <div class="hover-effect alt"></div>
            <div class="links"><a href="pic/portfolio/img-7@2x.jpg" class="link-icon alt flaticon-magnifying-glass84 fancy"></a><a href="page-portfolio-single.html" class="link-icon alt flaticon-return13"></a></div>
          </div>
          <!-- ! isotop item-->
          <!-- isotop item-->
          <div class="pic isotope-item photo"><img src="pic/portfolio/img-6.jpg" data-at2x="pic/portfolio/img-6@2x.jpg" alt>
            <div class="hover-effect alt"></div>
            <div class="links"><a href="pic/portfolio/img-6@2x.jpg" class="link-icon alt flaticon-magnifying-glass84 fancy"></a><a href="page-portfolio-single.html" class="link-icon alt flaticon-return13"></a></div>
          </div>
          <!-- ! isotop item-->
          <!-- isotop item-->
          <div class="pic isotope-item photo"><img src="pic/portfolio/img-5.jpg" data-at2x="pic/portfolio/img-5@2x.jpg" alt>
            <div class="hover-effect alt"></div>
            <div class="links"><a href="pic/portfolio/img-5@2x.jpg" class="link-icon alt flaticon-magnifying-glass84 fancy"></a><a href="page-portfolio-single.html" class="link-icon alt flaticon-return13"></a></div>
          </div>
          <!-- ! isotop item-->
          <!-- isotop item-->
          <div class="pic isotope-item photo"><img src="pic/portfolio/img-4.jpg" data-at2x="pic/portfolio/img-4@2x.jpg" alt>
            <div class="hover-effect alt"></div>
            <div class="links"><a href="pic/portfolio/img-4@2x.jpg" class="link-icon alt flaticon-magnifying-glass84 fancy"></a><a href="page-portfolio-single.html" class="link-icon alt flaticon-return13"></a></div>
          </div>
          <!-- ! isotop item-->
          <!-- isotop item-->
          <div class="pic isotope-item photo"><img src="pic/portfolio/img-3.jpg" data-at2x="pic/portfolio/img-3@2x.jpg" alt>
            <div class="hover-effect alt"></div>
            <div class="links"><a href="pic/portfolio/img-3@2x.jpg" class="link-icon alt flaticon-magnifying-glass84 fancy"></a><a href="page-portfolio-single.html" class="link-icon alt flaticon-return13"></a></div>
          </div>
          <!-- ! isotop item-->
          <!-- isotop item-->
          <div class="pic isotope-item photo"><img src="pic/portfolio/img-2.jpg" data-at2x="pic/portfolio/img-2@2x.jpg" alt>
            <div class="hover-effect alt"></div>
            <div class="links"><a href="pic/portfolio/img-2@2x.jpg" class="link-icon alt flaticon-magnifying-glass84 fancy"></a><a href="page-portfolio-single.html" class="link-icon alt flaticon-return13"></a></div>
          </div>
          <!-- ! isotop item-->
          <!-- isotop item-->
          <div class="pic isotope-item photo"><img src="pic/portfolio/img-1.jpg" data-at2x="pic/portfolio/img-1@2x.jpg" alt>
            <div class="hover-effect alt"></div>
            <div class="links"><a href="pic/portfolio/img-1@2x.jpg" class="link-icon alt flaticon-magnifying-glass84 fancy"></a><a href="page-portfolio-single.html" class="link-icon alt flaticon-return13"></a></div>
          </div>
          <!-- ! isotop item-->
        </div>
      </div>
      <!-- ! filter-->
    </section>
    <!-- ! section banner-->
    <section class="banner-section pt-30 pb-30">
      <div class="container">
        <div class="row">
          <div class="col-md-7">
            <h2 class="banner-title mt-0 mb-0">Do You Like Us ? Please Check Our Works</h2>
          </div>
          <div class="col-md-5 text-right"><a href="page-contact.html" class="cws-button white color-4">Contact Us</a><a href="#" class="cws-button white color-4">Check It</a></div>
        </div>
      </div>
    </section>
    <!-- section banner-->
    <!-- section news-->
    <section class="page-section pb-70 bg-2 bb-gray">
      <div class="container">
        <h2 class="title-section mb-0 mt-0 text-center">Latest News</h2>
        <div class="divider mb-20 mt-25"></div>
        <p class="text-center mb-50">Ut a nisl id ante tempus hendrerit. Proin pretium, leo ac pellentesque mollis, felis nunc ultrices eros, sed gravida augue augue mollis justo.<br> Suspendisse eu ligula. Nulla facilisi. Donec id justo.</p>
        <div class="carousel-container hover-item">
          <div class="row">
            <div class="owl-three-pag pagiation-carousel main-color carousel-hover">
              <!-- Blog Post image-->
              <div class="blog-item blog-box small">
                <!-- Blog Image-->
                <div class="blog-media">
                  <div class="pic"><img src="pic/blog/370x208/2.jpg" data-at2x="pic/blog/370x208/2@2x.jpg" alt>
                    <div class="hover-effect"></div>
                    <div class="links"><a href="pic/blog/370x208/2@2x.jpg" class="link-icon flaticon-magnifying-glass84 fancy"></a><a href="blog-single.html" class="link-icon flaticon-return13"></a></div>
                  </div>
                </div>
                <div class="blog-content">
                  <!-- title, author...-->
                  <div class="blog-item-data clearfix">
                    <div class="blog-date">
                      <div class="date">
                        <div class="date-cont"><span class="day">24</span><span title="March" class="month"><span>Mar</span></span><span class="year">2016</span><i class="springs"></i></div>
                      </div>
                    </div>
                    <h3 class="blog-title">Phasellus accumsan cursus velit</h3>
                    <div class="divider gray"></div>
                    <p class="post-info">by <span class="posr-author">admin </span><i>|</i>in <a href="#" class="post-category"> <span>news</span></a>, <a href="#" class="post-category"><span>business</span></a></p>
                  </div>
                  <!-- Text Intro-->
                  <div class="blog-item-body">
                    <p>Vestibulum ante ipsum primis in faucibus ai orci luctus et ultrices posuere cubilia.</p>
                  </div>
                </div>
              </div>
              <!-- ! Blog Post image-->
              <!-- Blog Post image-->
              <div class="blog-item blog-box small">
                <!-- Blog Image-->
                <div class="blog-media">
                  <div class="pic"><img src="pic/blog/370x208/3.jpg" data-at2x="pic/blog/370x208/3@2x.jpg" alt>
                    <div class="hover-effect"></div>
                    <div class="links"><a href="pic/blog/370x208/3@2x.jpg" class="link-icon flaticon-magnifying-glass84 fancy"></a><a href="blog-single.html" class="link-icon flaticon-return13"></a></div>
                  </div>
                </div>
                <div class="blog-content">
                  <!-- title, author...-->
                  <div class="blog-item-data clearfix">
                    <div class="blog-date">
                      <div class="date">
                        <div class="date-cont"><span class="day">23</span><span title="March" class="month"><span>Mar</span></span><span class="year">2016</span><i class="springs"></i></div>
                      </div>
                    </div>
                    <h3 class="blog-title">Aenean posuere, tortor sed cursus</h3>
                    <div class="divider gray"></div>
                    <p class="post-info">by <span class="posr-author">admin </span><i>|</i>in <a href="#" class="post-category"> <span>news</span></a>, <a href="#" class="post-category"><span>business</span></a></p>
                  </div>
                  <!-- Text Intro-->
                  <div class="blog-item-body">
                    <p>Vestibulum ante ipsum primis in faucibus ai orci luctus et ultrices posuere cubilia.</p>
                  </div>
                </div>
              </div>
              <!-- ! Blog Post image-->
              <!-- Blog Post image-->
              <div class="blog-item blog-box small">
                <!-- Blog Image-->
                <div class="blog-media">
                  <div class="pic"><img src="pic/blog/370x208/1.jpg" data-at2x="pic/blog/370x208/1@2x.jpg" alt>
                    <div class="hover-effect"></div>
                    <div class="links"><a href="pic/blog/370x208/1@2x.jpg" class="link-icon flaticon-magnifying-glass84 fancy"></a><a href="blog-single.html" class="link-icon flaticon-return13"></a></div>
                  </div>
                </div>
                <div class="blog-content">
                  <!-- title, author...-->
                  <div class="blog-item-data clearfix">
                    <div class="blog-date">
                      <div class="date">
                        <div class="date-cont"><span class="day">22</span><span title="March" class="month"><span>Mar</span></span><span class="year">2016</span><i class="springs"></i></div>
                      </div>
                    </div>
                    <h3 class="blog-title">Vestibulum ante ipsum primis</h3>
                    <div class="divider gray"></div>
                    <p class="post-info">by <span class="posr-author">admin </span><i>|</i>in <a href="#" class="post-category"> <span>news</span></a>, <a href="#" class="post-category"><span>business</span></a></p>
                  </div>
                  <!-- Text Intro-->
                  <div class="blog-item-body">
                    <p>Vestibulum ante ipsum primis in faucibus ai orci luctus et ultrices posuere cubilia.</p>
                  </div>
                </div>
              </div>
              <!-- ! Blog Post image-->
              <!-- Blog Post image-->
              <div class="blog-item blog-box small">
                <!-- Blog Image-->
                <div class="blog-media">
                  <div class="pic"><img src="pic/blog/370x208/2.jpg" data-at2x="pic/blog/370x208/2@2x.jpg" alt>
                    <div class="hover-effect"></div>
                    <div class="links"><a href="pic/blog/370x208/2@2x.jpg" class="link-icon flaticon-magnifying-glass84 fancy"></a><a href="blog-single.html" class="link-icon flaticon-return13"></a></div>
                  </div>
                </div>
                <div class="blog-content">
                  <!-- title, author...-->
                  <div class="blog-item-data clearfix">
                    <div class="blog-date">
                      <div class="date">
                        <div class="date-cont"><span class="day">21</span><span title="March" class="month"><span>Mar</span></span><span class="year">2016</span><i class="springs"></i></div>
                      </div>
                    </div>
                    <h3 class="blog-title">Faucibus ai orci luctus et</h3>
                    <div class="divider gray"></div>
                    <p class="post-info">by <span class="posr-author">admin </span><i>|</i>in <a href="#" class="post-category"> <span>news</span></a>, <a href="#" class="post-category"><span>business</span></a></p>
                  </div>
                  <!-- Text Intro-->
                  <div class="blog-item-body">
                    <p>Vestibulum ante ipsum primis in faucibus ai orci luctus et ultrices posuere cubilia.</p>
                  </div>
                </div>
              </div>
              <!-- ! Blog Post image-->
              <!-- Blog Post image-->
              <div class="blog-item blog-box small">
                <!-- Blog Image-->
                <div class="blog-media">
                  <div class="pic"><img src="pic/blog/370x208/3.jpg" data-at2x="pic/blog/370x208/3@2x.jpg" alt>
                    <div class="hover-effect"></div>
                    <div class="links"><a href="pic/blog/370x208/3@2x.jpg" class="link-icon flaticon-magnifying-glass84 fancy"></a><a href="blog-single.html" class="link-icon flaticon-return13"></a></div>
                  </div>
                </div>
                <div class="blog-content">
                  <!-- title, author...-->
                  <div class="blog-item-data clearfix">
                    <div class="blog-date">
                      <div class="date">
                        <div class="date-cont"><span class="day">20</span><span title="March" class="month"><span>Mar</span></span><span class="year">2016</span><i class="springs"></i></div>
                      </div>
                    </div>
                    <h3 class="blog-title">Ipsum primis in faucibus ai</h3>
                    <div class="divider gray"></div>
                    <p class="post-info">by <span class="posr-author">admin </span><i>|</i>in <a href="#" class="post-category"> <span>news</span></a>, <a href="#" class="post-category"><span>business</span></a></p>
                  </div>
                  <!-- Text Intro-->
                  <div class="blog-item-body">
                    <p>Vestibulum ante ipsum primis in faucibus ai orci luctus et ultrices posuere cubilia.</p>
                  </div>
                </div>
              </div>
              <!-- ! Blog Post image-->
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- ! section news-->
    <!-- section awesome-->
    <section class="page-section">
      <div class="container">
        <div class="row">
          <div class="col-md-6 mb-md-50">
            <!-- section title-->
            <h2 class="title-section mb-0 mt-0">The Eight Is <span>Awesome</span></h2>
            <!-- ! section title-->
            <div class="divider gray mb-20 mt-25 left"></div>
            <p class="mb-25">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula egi et dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient mon tes, nascetur ridiculus mus, quam felis, ultricies nec.</p>
            <!-- skill bar item-->
            <div class="skill-bar st-color-2">
              <div class="name">Branding<span class="skill-bar-perc"></span></div>
              <div class="bar"><span data-value="60" class="cp-bg-color skill-bar-progress"></span></div>
            </div>
            <!-- ! skill bar item-->
            <!-- skill bar item-->
            <div class="skill-bar st-color-4">
              <div class="name">Development<span class="skill-bar-perc"></span></div>
              <div class="bar"><span data-value="70" class="cp-bg-color skill-bar-progress"></span></div>
            </div>
            <!-- ! skill bar item-->
            <!-- skill bar item-->
            <div class="skill-bar">
              <div class="name">Design<span class="skill-bar-perc"></span></div>
              <div class="bar"><span data-value="80" class="cp-bg-color skill-bar-progress"></span></div>
            </div>
            <!-- ! skill bar item-->
            <!-- skill bar item-->
            <div class="skill-bar st-color-3">
              <div class="name">Support<span class="skill-bar-perc"></span></div>
              <div class="bar"><span data-value="90" class="cp-bg-color skill-bar-progress"></span></div>
            </div>
            <!-- ! skill bar item-->
          </div>
          <div class="col-md-6"><img src="pic/items-2.png" alt></div>
        </div>
      </div>
    </section>
    <!-- ! section awesome-->
    <!-- double parallax-->
    <div class="container-fluid">
      <div class="row flex-box">
        <div style="background-image: url('pic/parallax-1.jpg');" class="col-md-6 pt-140 pt-md-80 pb-md-80 pb-140 bg-section">
          <div class="row">
            <div class="col-md-8 half-section left">
              <!-- section title-->
              <h2 class="title-section mt-0 mb-0 text-white">Best Theme Ever! <br>Discover <span class="tx-color-2">The Eight</span></h2>
              <!-- ! section title-->
              <div class="divider left mt-20 mb-25 white"></div>
              <p class="mb-40 text-white">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p><a href="#" class="cws-button white">Contact Us</a>
            </div>
          </div>
        </div>
        <div style="background-image: url('pic/parallax-2.jpg');" class="col-md-6 pt-140 pt-md-80 pb-md-80 pb-140 bg-section">
          <div class="row">
            <div class="col-md-8 pl-55 half-section">
              <!-- section title-->
              <h2 class="title-section mt-0 mb-0 text-white">Welcome To <span>The Eight</span>,<br> Check It Now</h2>
              <!-- ! section title-->
              <div class="divider left mt-20 mb-25 white"></div>
              <p class="mb-40 text-white">Etiam imperdiet imperdiet orci. Nunc nec neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi.</p><a href="#" class="cws-button white">Watch More</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- ! double parallax-->
    <!-- section team-->
    <section class="page-section">
      <div class="container">
        <h2 class="title-section mb-0 mt-0 text-center">Meet Our <span>Team</span></h2>
        <div class="divider mb-20 mt-25 gray"></div>
        <p class="text-center mb-50">Curabitur at lacus ac velit ornare lobortis. Curabitur a felis in nunc fringilla tristique. Morbi mattis ullamcorper velit. Phasellus gravida semper nisi. Nullam vel sem. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam.</p>
        <div class="row cws-multi-col">
          <div class="col-md-3 col-sm-6 mb-md-30">
            <!-- profile item-->
            <div class="profile-item">
              <div class="pic"><img src="pic/team/3.jpg" data-at2x="pic/team/3@2x.jpg" alt>
                <div class="hover-effect"></div>
                <div class="links"><a href="pic/team/3@2x.jpg" class="link-icon flaticon-magnifying-glass84 fancy"></a><a href="page-profile.html" class="link-icon flaticon-return13"></a></div>
              </div>
              <div class="profile-info">
                <h3 class="profile-name">Joshua Doe<span class="special"> / Developer</span></h3>
                <div class="divider"></div>
                <p>Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec.</p>
                <div class="social-link"><a href="#" class="cws-social flaticon-facebook55"></a><a href="#" class="cws-social flaticon-twitter1"></a><a href="#" class="cws-social fa fa-google-plus"></a><a href="#" class="cws-social flaticon-social-network106"></a><a href="#" class="cws-social flaticon-pinterest3"></a></div>
              </div>
            </div>
            <!-- ! profile item-->
          </div>
          <div class="col-md-3 col-sm-6 mb-md-30">
            <!-- profile item-->
            <div class="profile-item">
              <div class="pic"><img src="pic/team/1.jpg" data-at2x="pic/team/1@2x.jpg" alt>
                <div class="hover-effect"></div>
                <div class="links"><a href="pic/team/1@2x.jpg" class="link-icon flaticon-magnifying-glass84 fancy"></a><a href="page-profile.html" class="link-icon flaticon-return13"></a></div>
              </div>
              <div class="profile-info">
                <h3 class="profile-name">Scott Doe<span class="special"> / Web Designer</span></h3>
                <div class="divider color-4"></div>
                <p>Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec.</p>
                <div class="social-link"><a href="#" class="cws-social flaticon-facebook55"></a><a href="#" class="cws-social flaticon-twitter1"></a><a href="#" class="cws-social fa fa-google-plus"></a><a href="#" class="cws-social flaticon-social-network106"></a><a href="#" class="cws-social flaticon-pinterest3"></a></div>
              </div>
            </div>
            <!-- ! profile item-->
          </div>
          <div class="col-md-3 col-sm-6 mb-sm-30">
            <!-- profile item-->
            <div class="profile-item">
              <div class="pic"><img src="pic/team/2.jpg" data-at2x="pic/team/2@2x.jpg" alt>
                <div class="hover-effect"></div>
                <div class="links"><a href="pic/team/2@2x.jpg" class="link-icon flaticon-magnifying-glass84 fancy"></a><a href="page-profile.html" class="link-icon flaticon-return13"></a></div>
              </div>
              <div class="profile-info">
                <h3 class="profile-name">Mary Doe<span class="special"> / Graphic Designer</span></h3>
                <div class="divider color-2"></div>
                <p>Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec.</p>
                <div class="social-link"><a href="#" class="cws-social flaticon-facebook55"></a><a href="#" class="cws-social flaticon-twitter1"></a><a href="#" class="cws-social fa fa-google-plus"></a><a href="#" class="cws-social flaticon-social-network106"></a><a href="#" class="cws-social flaticon-pinterest3"></a></div>
              </div>
            </div>
            <!-- ! profile item-->
          </div>
          <div class="col-md-3 col-sm-6">
            <!-- profile item-->
            <div class="profile-item">
              <div class="pic"><img src="pic/team/4.jpg" data-at2x="pic/team/4@2x.jpg" alt>
                <div class="hover-effect"></div>
                <div class="links"><a href="pic/team/4@2x.jpg" class="link-icon flaticon-magnifying-glass84 fancy"></a><a href="page-profile.html" class="link-icon flaticon-return13"></a></div>
              </div>
              <div class="profile-info">
                <h3 class="profile-name">Peter Doe<span class="special"> / Ceo</span></h3>
                <div class="divider color-3"></div>
                <p>Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec.</p>
                <div class="social-link"><a href="#" class="cws-social flaticon-facebook55"></a><a href="#" class="cws-social flaticon-twitter1"></a><a href="#" class="cws-social fa fa-google-plus"></a><a href="#" class="cws-social flaticon-social-network106"></a><a href="#" class="cws-social flaticon-pinterest3"></a></div>
              </div>
            </div>
            <!-- ! profile item-->
          </div>
        </div>
      </div>
    </section>
    <!-- ! section team-->
    <!-- section parallax counter-->
    <section class="page-section cws_prlx_section pt-70 pb-70 border-t border-b"><img src="pic/parallax-map.jpg" alt class="cws_prlx_layer">
      <div class="container">
        <div class="row cws-multi-col">
          <div class="col-sm-3 col-xs-6 mb-md-50">
            <!-- counter block-->
            <div class="counter-block border-none white-t"><i class="counter-icon flaticon-social-network156"></i>
              <div data-count="4350" class="counter">0</div>
              <div class="count-divider"></div>
              <div class="counter-name text-uppercase">User Online</div>
            </div>
            <!-- ! counter block-->
          </div>
          <div class="col-sm-3 col-xs-6 mb-md-50">
            <!-- counter block-->
            <div class="counter-block border-none white-t"><i class="counter-icon flaticon-diamond7"></i>
              <div data-count="5600" class="counter">0</div>
              <div class="count-divider"></div>
              <div class="counter-name text-uppercase">Prizes Win</div>
            </div>
            <!-- counter block-->
          </div>
          <div class="col-sm-3 col-xs-6">
            <!-- counter block-->
            <div class="counter-block border-none white-t"><i class="counter-icon flaticon-hearts49"></i>
              <div data-count="7200" class="counter">0</div>
              <div class="count-divider"></div>
              <div class="counter-name text-uppercase">Happy Customers</div>
            </div>
            <!-- ! counter block-->
          </div>
          <div class="col-sm-3 col-xs-6">
            <!-- counter block-->
            <div class="counter-block border-none white-t"><i class="counter-icon flaticon-portfolio2"></i>
              <div data-count="8190" class="counter">0</div>
              <div class="count-divider"></div>
              <div class="counter-name text-uppercase">Awesome Projects</div>
            </div>
            <!-- ! counter block-->
          </div>
        </div>
      </div>
    </section>
    <!-- ! section parallax counter-->
    <!-- section price tables-->
    <section class="page-section">
      <div class="container">
        <!-- section title-->
        <h2 class="title-section mt-0 mb-0 text-center">Our Price Tables</h2>
        <!-- ! section title-->
        <div class="divider mt-20 mb-25"></div>
        <p class="mb-50 text-center">Curabitur at lacus ac velit ornare lobortis. Curabitur a felis in nunc fringilla tristique. Morbi mattis ullamcorper velit. Phasellus gravida semper<br> nisi. Nullam vel sem. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam.</p>
        <div class="row">
          <div class="col-md-10 col-md-offset-1">
            <div class="row cws-multi-col">
              <div class="col-md-4 col-sm-6 mb-md-30">
                <article class="pricing-tables">
                  <div class="header-pt">
                    <h3>Basic</h3>
                  </div>
                  <div class="price-pt"><sup>$</sup>6<sup>.99</sup><sub>monthly</sub></div>
                  <ul class="pricing-list">
                    <li> <i class="list-icon flaticon-social-network156"></i>1 User Account</li>
                    <li> <i class="list-icon flaticon-lights7"></i>15 Projects</li>
                    <li> <i class="list-icon flaticon-floppy20"></i>3 Gb Storage</li>
                    <li> <i class="list-icon flaticon-arrow164"></i>100 Files Upload</li>
                    <li> <i class="list-icon flaticon-clocks18"></i>3h Assistance</li>
                  </ul><a href="#" class="cws-button small">Try It Now</a>
                </article>
              </div>
              <div class="col-md-4 col-sm-6 mb-md-30">
                <article class="pricing-tables st-color-2">
                  <div class="header-pt">
                    <h3>Standart</h3>
                  </div>
                  <div class="price-pt"><sup>$</sup>12<sup>.99</sup><sub>monthly</sub></div>
                  <ul class="pricing-list">
                    <li> <i class="list-icon flaticon-social-network156"></i>5 User Account</li>
                    <li> <i class="list-icon flaticon-lights7"></i>45 Projects</li>
                    <li> <i class="list-icon flaticon-floppy20"></i>10 Gb Storage</li>
                    <li> <i class="list-icon flaticon-arrow164"></i>1000 Files Upload</li>
                    <li> <i class="list-icon flaticon-clocks18"></i>12h Assistance</li>
                  </ul><a href="#" class="cws-button small color-2">Try It Now</a>
                </article>
              </div>
              <div class="col-md-4 col-sm-6">
                <article class="pricing-tables st-color-3">
                  <div class="header-pt">
                    <h3>Premium</h3>
                  </div>
                  <div class="price-pt"><sup>$</sup>24<sup>.99</sup><sub>monthly</sub></div>
                  <ul class="pricing-list">
                    <li> <i class="list-icon flaticon-social-network156"></i>Unlimited User Account</li>
                    <li> <i class="list-icon flaticon-lights7"></i>Unlimited Projects</li>
                    <li> <i class="list-icon flaticon-floppy20"></i>100 Gb Storage</li>
                    <li> <i class="list-icon flaticon-arrow164"></i>Unlimited Files Upload</li>
                    <li> <i class="list-icon flaticon-clocks18"></i>24h Assistance</li>
                  </ul><a href="#" class="cws-button small color-3">Try It Now</a>
                </article>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- ! section price tables-->
    <!-- section parallax-->
    <section class="page-section cws_prlx_section pt-120 pb-70"><img src="pic/parallax-3.jpg" alt class="cws_prlx_layer">
      <div class="overlay pattern"></div>
      <div class="container">
        <div class="row">
          <div class="col-md-10 col-md-offset-1">
            <h2 class="title-section mb0 mt-0 text-center text-white">Testimonials</h2>
            <div class="divider mb-20 mt-25 white"></div>
            <p class="text-center text-white mb-40"> Praesent nec nisl a purus blandit viverra. Praesent ac massa at ligula laoreet iaculis. Nulla neque dolor, sagittis eget, iaculis quis, molestie non, velit. Mauris turpis nunc, blandit et, volutpat molestie, porta ut, ligula.</p>
          </div>
        </div>
        <div class="carousel-container">
          <div class="row">
            <div class="owl-two-pag pagiation-carousel white">
              <!-- comment list section-->
              <div class="comments">
                <div class="comment-list">
                  <div class="comment-container white clearfix">
                    <div class="author"><img src="pic/team/100x100/1.jpg" data-at2x="pic/team/100x100/1@2x.jpg" alt class="color-4">
                      <div class="author-name">Matthew Doe</div>
                    </div>
                    <div class="comment-text">
                      <div class="description">
                        <p>Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultrici es sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Done mollis hendrerit risus. Phasellus nec sem in justo ...</p>
                      </div><a href="#" class="button-reply"><i class="flaticon-return13"></i></a>
                    </div>
                  </div>
                </div>
              </div>
              <!-- ! comment list section-->
              <!-- comment list section-->
              <div class="comments">
                <div class="comment-list">
                  <div class="comment-container white clearfix">
                    <div class="author"><img src="pic/team/100x100/2.jpg" data-at2x="pic/team/100x100/2@2x.jpg" alt class="color-4">
                      <div class="author-name">Mary Doe</div>
                    </div>
                    <div class="comment-text">
                      <div class="description">
                        <p>Curabitur ligula sapien, tincidunt non, euismod vitae, pose uere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor ...</p>
                      </div><a href="#" class="button-reply"><i class="flaticon-return13"></i></a>
                    </div>
                  </div>
                </div>
              </div>
              <!-- ! comment list section-->
              <!-- comment list section-->
              <div class="comments">
                <div class="comment-list">
                  <div class="comment-container white clearfix">
                    <div class="author"><img src="pic/team/100x100/3.jpg" data-at2x="pic/team/100x100/3@2x.jpg" alt class="color-4">
                      <div class="author-name">Matthew Doe</div>
                    </div>
                    <div class="comment-text">
                      <div class="description">
                        <p>Curabitur ligula sapien, tincidunt non, euismod vitae, pose uere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor ...</p>
                      </div><a href="#" class="button-reply"></a><a href="#" class="button-reply"><i class="flaticon-return13"></i></a>
                    </div>
                  </div>
                </div>
              </div>
              <!-- ! comment list section-->
              <!-- comment list section-->
              <div class="comments">
                <div class="comment-list">
                  <div class="comment-container white clearfix">
                    <div class="author"><img src="pic/team/100x100/4.jpg" data-at2x="pic/team/100x100/4@2x.jpg" alt class="color-4">
                      <div class="author-name">Matthew Doe</div>
                    </div>
                    <div class="comment-text">
                      <div class="description">
                        <p>Curabitur ligula sapien, tincidunt non, euismod vitae, pose uere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor ...</p>
                      </div><a href="#" class="button-reply"></a><a href="#" class="button-reply"><i class="flaticon-return13"></i></a>
                    </div>
                  </div>
                </div>
              </div>
              <!-- ! comment list section-->
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- ! section parallax-->
    <!---->
    <section class="page-section pb-0">
      <div class="container">
        <!-- section title-->
        <h2 class="title-section mt-0 mb-0 text-center">Contact Us</h2>
        <!-- ! section title-->
        <div class="divider mt-20 mb-25"></div>
        <p class="mb-50 text-center">Curabitur at lacus ac velit ornare lobortis. Curabitur a felis in nunc fringilla tristique. Morbi mattis ullamcorper velit. Phasellus gravida semper<br> nisi. Nullam vel sem. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam.</p>
        <div class="row">
          <div class="col-md-6 mb-md-50">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
            <hr>
            <address class="contact-address">
              <p><span>Address:</span> 250 Biscayne Blvd. (North) 11st Floor New Tower Miami, Florida 33148</p>
              <p><span>Phone number:</span> <a href="tel:180012345678">1-800-123-45678</a></p>
              <p><span>Email:</span> <a href="mailto:the8@gmail.com">the8@gmail.com</a></p>
            </address>
            <hr>
            <!-- social icons--><a href="#" class="cws-social flaticon-facebook55"></a><a href="#" class="cws-social flaticon-twitter1"></a><a href="#" class="cws-social fa fa-google-plus"></a><a href="#" class="cws-social flaticon-social-network106"></a><a href="#" class="cws-social flaticon-pinterest3"></a>
            <!-- ! social icons-->
          </div>
          <div class="col-md-6">
            <div class="widget-contact-form pb-0">
              <!-- contact-form-->
              <div id="feedback-form-errors" role="alert" class="alert alert-danger alt alert-dismissible fade in">
                <button type="button" data-dismiss="alert" aria-label="Close" class="close"><span aria-hidden="true">×</span></button><i class="alert-icon border flaticon-exclamation-mark1"></i><strong>Error Message!</strong><br>
                <div class="message"></div>
              </div>
              <div class="email_server_responce"></div>
              <form action="php/contacts-process.php" method="post" class="form contact-form alt clearfix">
                <input type="text" name="name" value="" size="40" placeholder="Your Name" aria-invalid="false" aria-required="true" class="form-row form-row-first">
                <input type="text" name="email" value="" size="40" placeholder="Your Email" aria-required="true" class="form-row form-row-last">
                <textarea name="message" cols="40" rows="4" placeholder="Your Message" aria-invalid="false" aria-required="true"></textarea>
                <input type="submit" value="Send Message" class="cws-button border-radius pull-right">
              </form>
              <!-- /contact-form-->
            </div>
          </div>
        </div>
      </div>
      <!--<div class="map-full-width map-wrapper mt-60 border-t">
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d25295.930156304785!2d16.371063311644324!3d48.208404844730474!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x476d07986fcad78b%3A0x73f5a4d267cc4174!2zTmFnbGVyZ2Fzc2UgMTAsIDEwMTAgV2llbiwg0JDQstGB0YLRgNC40Y8!5e0!3m2!1sru!2sua!4v1453294615596" allowfullscreen=""></iframe>
      </div>-->
    </section>
    <!-- footer-->
    <footer class="footer">
      <div class="container">
        <div class="row cws-multi-col">
          <div class="col-md-3 col-sm-6 mb-md-50">
            <div class="widget-footer text">
              <h3>About</h3>
              <div class="divider"></div>
              <p>Ut tincidunt nisl sapien, eget gravida quama vestibulum vitae. Ut ultrices purus quis tinci dunt rutrum proin commodo ipsum.</p>
              <p>Vestibulum vitae nisl quis elit tristique egesi tas eget sed nisi. Etiam mi sapien, luctus ac tempor quis, varius eu neque.</p>
            </div>
          </div>
          <div class="col-md-3 col-sm-6 mb-md-50">
            <div class="widget-footer">
              <h3>Recent posts</h3>
              <div class="divider"></div>
              <div class="recent-item clearfix"><a href="blog-single.html"><img src="pic/footer/7.jpg" data-at2x="pic/footer/7@2x.jpg" alt></a>
                <h4 class="recent-title"><a href="blog-single.html">Morbi Iaculis</a></h4>
                <p>Ut tincidunt nisl s apien, eget gravida sed nisi reet ... <a href="#">more</a></p>
              </div>
              <div class="recent-item clearfix"><a href="blog-single.html"><img src="pic/footer/8.jpg" data-at2x="pic/footer/8@2x.jpg" alt></a>
                <h4 class="recent-title"><a href="blog-single.html">Praesent sagittis</a></h4>
                <p>Ut tincidunt nisl s apien, eget gravida sed nisi reet ... <a href="#">more</a></p>
              </div>
            </div>
          </div>
          <div class="col-md-3 col-sm-6 mb-sm-50">
            <div class="widget-footer">
              <h3>Gallery</h3>
              <div class="divider"></div>
              <div class="gallery clearfix">
                <div class="gallery-item">
                  <div class="pic"><img src="pic/footer/1.jpg" alt data-at2x="pic/footer/1@2x.jpg">
                    <div class="hover-effect alt">
                      <div class="links"><a href="pic/footer/1@2x.jpg" class="link-icon alt flaticon-magnifying-glass84 fancy"></a></div>
                    </div>
                  </div>
                </div>
                <div class="gallery-item">
                  <div class="pic"><img src="pic/footer/2.jpg" alt data-at2x="pic/footer/2@2x.jpg">
                    <div class="hover-effect alt">
                      <div class="links"><a href="pic/footer/2@2x.jpg" class="link-icon alt flaticon-magnifying-glass84 fancy"></a></div>
                    </div>
                  </div>
                </div>
                <div class="gallery-item">
                  <div class="pic"><img src="pic/footer/3.jpg" alt data-at2x="pic/footer/3@2x.jpg">
                    <div class="hover-effect alt">
                      <div class="links"><a href="pic/footer/3@2x.jpg" class="link-icon alt flaticon-magnifying-glass84 fancy"></a></div>
                    </div>
                  </div>
                </div>
                <div class="gallery-item">
                  <div class="pic"><img src="pic/footer/4.jpg" alt data-at2x="pic/footer/4@2x.jpg">
                    <div class="hover-effect alt">
                      <div class="links"><a href="pic/footer/4@2x.jpg" class="link-icon alt flaticon-magnifying-glass84 fancy"></a></div>
                    </div>
                  </div>
                </div>
                <div class="gallery-item">
                  <div class="pic"><img src="pic/footer/5.jpg" alt data-at2x="pic/footer/5@2x.jpg">
                    <div class="hover-effect alt">
                      <div class="links"><a href="pic/footer/5@2x.jpg" class="link-icon alt flaticon-magnifying-glass84 fancy"></a></div>
                    </div>
                  </div>
                </div>
                <div class="gallery-item">
                  <div class="pic"><img src="pic/footer/6.jpg" alt data-at2x="pic/footer/6@2x.jpg">
                    <div class="hover-effect alt">
                      <div class="links"><a href="pic/footer/6@2x.jpg" class="link-icon alt flaticon-magnifying-glass84 fancy"></a></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-3 col-sm-6">
            <div class="widget-footer">
              <h3>Contact us</h3>
              <div class="divider"></div>
              <address>
                <p>You can contact us via <a href="mailto:the8@gmail.com">the8@gmail.com</a></p><strong>Our address</strong>
                <p>250 Biscayne Blvd. (North) 11st Floor New World Tower Miami, Florida 33148</p><strong>Our phone</strong><br><a href="tel:180012345678">1-800-123-45678</a>
              </address>
            </div>
          </div>
        </div>
      </div>
      <div class="copyright">
        <div class="container">
          <div class="row">
            <div class="col-sm-8">
              <p>Copyrights ©2016: The8 - Premium Multipurpose <a href="http://www.moke8.com/" target="_blank">moke8</a></p>
            </div>
            <div class="col-sm-4 text-right"><a href="#" class="cws-social flaticon-facebook55"></a><a href="#" class="cws-social flaticon-twitter1"></a><a href="#" class="cws-social fa fa-google-plus"></a><a href="#" class="cws-social flaticon-social-network106"></a><a href="#" class="cws-social flaticon-pinterest3"></a></div>
          </div>
        </div>
      </div>
    </footer>
    <div id="scroll-top"><i class="fa fa-angle-up"></i></div>
    <!-- ! footer-->
    <!--<script src="https://www.youtube.com/player_api"></script>-->
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/owl.carousel.js"></script>
    <script type="text/javascript" src="js/jquery.sticky.js"></script>
    <script type="text/javascript" src="js/cws_parallax.js"></script>
    <script type="text/javascript" src="js/jquery.fancybox.pack.js"></script>
    <script type="text/javascript" src="js/jquery.fancybox-media.js"></script>
    <script type="text/javascript" src="js/jquery.isotope.min.js"></script>
    <script type="text/javascript" src="rs-plugin/js/jquery.themepunch.tools.min.js"></script>
    <script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
    <script type="text/javascript" src="rs-plugin/js/extensions/revolution.extension.slideanims.min.js"></script>
    <script type="text/javascript" src="rs-plugin/js/extensions/revolution.extension.layeranimation.min.js"></script>
    <script type="text/javascript" src="rs-plugin/js/extensions/revolution.extension.navigation.min.js"></script>
    <script type="text/javascript" src="rs-plugin/js/extensions/revolution.extension.parallax.min.js"></script>
    <script type="text/javascript" src="rs-plugin/js/extensions/revolution.extension.video.min.js"></script>
    <script type="text/javascript" src="rs-plugin/js/extensions/revolution.extension.actions.min.js"></script>
    <script type="text/javascript" src="rs-plugin/js/extensions/revolution.extension.kenburn.min.js"></script>
    <script type="text/javascript" src="rs-plugin/js/extensions/revolution.extension.migration.min.js"></script>
    <script type="text/javascript" src="js/jquery.validate.min.js"></script>
    <script type="text/javascript" src="js/jquery.form.min.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
    <script type="text/javascript" src="js/bg-video/cws_self_vimeo_bg.js"></script>
    <script type="text/javascript" src="js/bg-video/jquery.vimeo.api.min.js"></script>
    <script type="text/javascript" src="js/bg-video/cws_YT_bg.js"></script>
    <!--<script type="text/javascript" src="js/jquery.tweet.js"></script>-->
    <script type="text/javascript" src="tuner/js/colorpicker.js"></script>
    <script type="text/javascript" src="tuner/js/scripts.js"></script>
    <script type="text/javascript" src="js/retina.min.js"></script>
  </body>
</html>